Day 18 - Dark Mode 使用 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 18

自我挑戰組

初見 Tailwindcss系列第 18 篇

Day 18 - Dark Mode 使用

13th鐵人賽

威爾豬

2021-09-18 19:36:37

1466 瀏覽

分享至

今天是連假第一天，返鄉的看官們都平安吧！前幾天蘋果發表了 New iPhone，售價降低了，加上今年又有五倍券，雖然沒啥新意，且威爾豬自己的還頭好壯壯，但折扣下來的價格跟往常比還是好誘人啊，各位看官們會想買 iPhone 13 (pro) 嗎？

深色模式

自從蘋果推出深色主題後，就受到不少眾人喜愛，威爾豬自己也是在深色主題下工作的，既能讓耗電量減少，也能增加螢幕壽命，更能讓長期在電腦面前的工作者們，降低視覺疲勞。所以現在不管是桌機還手機，深色主題是很多系統的主要功能，設計一個深色版的網站也變得越來越普遍。

身為現代 CSS 框架之一的 Tailwind，當然也具備這項能力，不過出於文件大小的考慮，在默認情況下，Tailwind 是沒有開啟深色模式的。威爾豬就來教你，如何使用隱藏版深色模式， Let's Go～

首先，開起深色模式有兩種方式，完全取決於當初專案設計時是要讓使用者 自動切換 還是 手動切換。

自動切換

先來說說自動切換吧，沒聽錯，就是自動。什麼是自動切換呢？就是跟隨使用者預設的系統主題。像威爾豬使用的 macOS 和 iOS，分為淺色和深色，當使用者將系統更改為深色主題時，Tailwind 就會自動將你開發的網頁轉為深色模式；亦或是系統啟用自動，在太陽下山時，系統就會自動轉變為深色主題。也就是白天開啟網站為淺色配置，晚上開起同一網站就變為深色配置了。那 Tailwind 該如何啟用自動配置：

首先在 tailwind.config.js 中把 darkMode 設置為 media，如下：

// tailwind.config.js

module.exports = {
  ...
  darkMode: 'media',
  ...
}

沒錯，這樣就啟動深色模式了。media 就是在底層使用了 CSS 的 prefers-color-scheme 來監測淺色或深色主題。現在，只要使用者的操作系統開啟了深色主題，那 Tailwind 編寫的網頁就會轉為深色模式了。

macOS 自帶主題

不過還沒結束，我們要讓 Tailwind 知道轉為深色模式時要用什麼配色，使用方式為 dark:{class}。看以下範例：

<html>
  <body>
    <div class="h-screen p-4 bg-white dark:bg-gray-900">
      <h1 class="text-5xl text-gray-900 dark:text-white">自動深色模式</h1>
    </div>
  </body>
</html>

在默認情況下，深色模式只對 backgroundColor、borderColor、gradientColorStops、placeholderColor 和 textColor 起作用，目前對威爾豬來說夠用了，不需再額外添加。

手動切換

顧名思義，讓使用者想自由切換為深色模式或是淺色模式，通常會使用到 JavaScript 來完成觸發條件。如果要支持手動切換為深色模式，則將 media 替換為 class。範例如下：

// tailwind.config.js

module.exports = {
  ...
  darkMode: 'class',
  ...
}

這樣，深色模式將不再根據 prefers-color-scheme 起作用，而是當在 HTML DOM 元素中指定 Class 為 dark 時才啟用。看以下範例：

<html class="dark">
  <body>
    <div class="h-screen p-4 bg-white dark:bg-gray-900">
      <h1 class="text-5xl text-gray-900 dark:text-white">手動深色模式</h1>
    </div>
  </body>
</html>

至於如何將 dark 添加到 HTML DOM元素中取決於當初專案的決定，但是常見的方式是使用 JavaScript （如：localStorage）來讀取，並更新相對應的顏色。